<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title></title>
<style>

</style>
<script src="../../JS/vue.js"></script>
</head>
<body>
<div id="box">
	<input v-model="num1" size="5">
	<select v-model="operator">
		<option selected>+</option>
		<option>-</option>
		<option>*</option>
		<option>/</option>
	</select>
	<input v-model="num2" size="5">
	=
	<input v-model="result" v-on:focus="getResult()" size="5">
</div>
<script type="text/javascript">
	var vm = new Vue({
		el : '#box',
		data : {
			num1 : '',
			num2 : '',
			operator : '+',
			result : ''
		},
		methods : {
			getResult : function(){
				switch (this.operator){
					case "+":
						this.result = parseInt(this.num1) + parseInt(this.num2);
						break;
					case "-":
						this.result = parseInt(this.num1) - parseInt(this.num2);
						break;
					case "*":
						this.result = parseInt(this.num1) * parseInt(this.num2);
						break;
					case "/":
						this.result = parseInt(this.num1) / parseInt(this.num2);
						break;
				}

			}
		}
	});
</script>



</body>

</html>



